<template>
	<view class="container write-off-container">
		<view class="page-main">
			<view class="yuan-form">
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">优惠券编码:</view>
					<input class="yuan-input" placeholder-class="placeholder-style" v-model="couponCode"
						placeholder="请输入优惠券编码" />

				</view>


				<view class="btn-box">
					<view class="yuan-btn btn-primary" style="margin-right: 50rpx;" @click="getCode">扫码核销</view>
					<view class="yuan-btn btn-default" @click="clickWrite">核销</view>
				</view>
				<view class="log-link" @click="jump('/pagesWorker/writeOff/writeOffLog')">核销记录</view>
			</view>
		</view>
		<view class="other-panel" :class="showSizePanel&&'other-panel-show'">
			<view class="other-main" :class="showSizePanel&&'other-main-show'">
				<view>
					<view class="coupon-top">
						<view>
							<text class="top-title">优惠劵编码</text>
							<text class="top-info">2345678888978</text>
						</view>
						<view class="c-danger" style="text-align: right;">
							<view>
								<text class="top-unit">¥</text>
								<text class="top-price">20</text>
							</view>
							<view class="top-tips">满50可用</view>
						</view>
					</view>
					<view>
						<view class='coupon-info'>
							<text class="coupon-info-title">用户账号：</text>
							<text class="coupon-info-word">{{couponInfo.userPhone}}</text>
						</view>
						<view class='coupon-info'>
							<text class="coupon-info-title">优惠劵名称：</text>
							<text class="coupon-info-word">{{couponInfo.name}}</text>
						</view>
						<view class='coupon-info'>
							<text class="coupon-info-title">使用条件：</text>
							<text class="coupon-info-word">{{couponInfo.usageCondition}}</text>
						</view>
						<view class='coupon-info'>
							<text class="coupon-info-title">优惠劵类型：</text>
							<text class="coupon-info-word">{{couponInfo.type}}</text>
						</view>
						<!-- <view class='coupon-info'>
							<text class="coupon-info-title">限制品类：</text>
							<text class="coupon-info-word">xxxxx</text>
						</view> -->
						<view class='coupon-info'>
							<text class="coupon-info-title">限制平台/门店：</text>
							<text class="coupon-info-word">
								<text v-for="(store,idx) in couponInfo.storeNameS"
									:key="store+'_'+idx">{{store}}、</text>
							</text>
						</view>
						<view class='coupon-info'>
							<text class="coupon-info-title">使用说明：</text>
							<text class="coupon-info-word">{{couponInfo.usageDescription}}</text>
						</view>
					</view>
				</view>
				<view class="other-bottom">
					<view class="yuan-btn btn-default sure-btn" style="margin-right: 50rpx;" @click="clickCancel">取消
					</view>
					<view class="yuan-btn btn-primary sure-btn" @click="clickSure">确认核销</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	// CPN1753344362095274
	// CPN1753342085747341
	// CPN175221391587616
	// CPN1753341227738236
	import { onMounted, ref } from 'vue';
	import userApi from '../../common/userApi';
	import { hideLoading, showLoading, showToast } from '../../common/util';
	const couponCode = ref('')
	const couponInfo = ref<any>({})
	const getCode = () => {
		wx.scanCode({
			success(res) {
				couponCode.value = res.result;
				clickWrite()
			}
		})
	}
	const clickWrite = async () => {
		if (couponCode.value === '') {
			showToast('没有获取到优惠券编码')
			return
		}
		showLoading()
		try {
			const res = await userApi.verifyCoupon(couponCode.value)
			couponInfo.value = res.data || {}
			showSizePanel.value = true
		} finally {
			hideLoading()
		}



	}
	const clickSure = async () => {
		showLoading()
		try {
			const res = await userApi.useCoupon({
				couponCode: couponCode.value,
				userPhone: couponInfo.value.userPhone
			})
			showToast('核销成功')
			showSizePanel.value = false
		} finally {
			hideLoading()
		}

	}
	const clickCancel = () => {
		showSizePanel.value = false

	}

	const showSizePanel = ref(false)

	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>


<style lang="scss">
	.write-off-container {
		padding: 25rpx;
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);

		.page-main {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
		}

		.btn-box {
			margin-top: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.yuan-btn {
				display: inline-flex;
				height: 70rpx;
				width: 200rpx;
			}
		}

		.log-link {
			font-size: 26rpx;
			text-align: center;
			color: #3AD3C1;
			margin-top: 50rpx;
		}

		.coupon-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1px #eee;
			padding: 20rpx 0;
		}

		.top-title {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.top-info {
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			margin-left: 10rpx;
		}

		.top-unit {
			font-size: 24rpx;
		}

		.top-price {
			font-size: 44rpx;
			font-weight: bold;
		}

		.top-tips {
			font-size: 24rpx;
		}

		.coupon-info {
			margin-top: 20rpx;

		}

		.coupon-info-title {
			font-size: 28rpx;
			color: #6D6D6D;
			display: inline-block;
			vertical-align: top;
		}

		.coupon-info-word {
			font-size: 28rpx;
			color: #222222;
			display: inline-block;
			vertical-align: top;
		}

		.other-panel {
			position: fixed;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transform: translateY(100%);
		}

		.other-panel-show {
			transform: translateY(0);
		}

		.other-main {
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 20rpx 50rpx 20rpx;
			transform: translateY(100%);
			transition: all 0.3s;
		}

		.other-main-show {
			transform: translateY(0);
		}

		.other-bottom {
			margin-top: 100rpx;
			text-align: center;

			.sure-btn {
				display: inline-flex;
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}
	}
</style>